<!-- 慕课详情头部-->
<template>
    <div class="detail-header-wrapper">
        <div class="info-left">
            <LazyImage :src="detailData.cover" class-name="logo-img" />
        </div>
        <div class="info-right">
            <div class="info-right-top space-between">
                <div class="course-name">
                    <Ellipsis :content="detailData.title"/>
                </div>
                <Star :score="detailData.score || 0" :size="14" :score-bold="true" :disabled="true" :space="4"/>
            </div>
            <div class="info-item">
                <div class="item-label">
                    分类：
                </div>
                <div class="item-content">
                    <Ellipsis :content="handleClassify(detailData.classifyList, '-')"/>
                </div>
            </div>
            <div class="flex-start">
                <div class="info-item mooc-detail-grade-wrap">
                    <span class="item-label">年级：</span>
                    <p class="mooc-detail-grade">
                        <Ellipsis :content="handleAloneGrade(detailData.gradeList, '-')"></Ellipsis>
                    </p>
                </div>
                <div class="info-item">
                    <span class="item-label">学段学科：</span>
                    <p class="mooc-detail-stage">
                        <Ellipsis :content="handleAloneStageSubject(detailData.stageSubjectList, '-')"></Ellipsis>
                    </p>
                </div>
            </div>
            <div class="flex-start mar-t8">
                <div class="info-item-label2">
                    学时：<span :class="[{'info-item-num2': detailData.classHour != undefined}]">{{ detailData.classHour != undefined ? detailData.classHour : '-' }}</span>
                </div>
                <div class="info-item-label2">
                    报名人数：<span class="info-item-num2">{{ detailData.buyUserCount || 0 }}</span>
                </div>
            </div>
            <!-- 预览状态下需要一直显示报名按钮，不展示个人学习情况 -->
            <div class="option-item flex-start" v-if="isPreview">
                <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36" @click="apply">我要报名</el-button>
            </div>
            <div class="option-item flex-start" v-else>
                <!-- 已经报名的用户不受发布状态影响 -->
                <el-button v-if="isBuyPerson" class="srt-el-button srt-el-button-h36" @click="study">{{`${detailData.completeRate <= 0 ? '开始学习' : detailData.completeRate < 100 ? '继续学习' : '已完成'}`}}</el-button>
                <!-- 发布了才能报名 -->
                <el-button v-if="!isBuyPerson && publishState" class="srt-el-button srt-el-button--primary srt-el-button-h36" @click="apply">我要报名</el-button>
                <!-- 报名了才有学习信息 -->
                <div v-if="isBuyPerson" class="study-rate">已学：
                    <span class="studied-num">{{detailData.completeRate || 0}}%</span>
                    <span class="progress-warp"><span class="inner" :style="{width:`${detailData.completeRate || 0}%`}"></span></span>
                    <el-popover
                        placement="bottom"
                        :width="380"
                        :teleported="false"
                        trigger="hover"
                        popper-class="rule-popover"
                        v-if="detailData.learnState !== 0"
                    >
                        <div class="rule-info">
                            <li class="item">
                                <span class="title">课程任务</span>
                                <p class="content">{{detailData.courseWareMustCount || 0}}个章节，{{ detailData.compulsoryHomeWorkCount || 0 }}个必答作业{{detailData.appraiseMust ? '，需完成课程评价': ''}}</p>
                            </li>
                            <li class="item">
                                <span class="title">完成进度</span>
                                <p class="content">{{detailData.userCourseWareMustCompleteCount || 0}}个章节，{{ detailData.userHomeWorkMustCompleteCount || 0 }}个必答作业{{detailData.appraiseMust ? `，${detailData.userAppraiseCompleteState == 2 ? '已' : '未'}完成课程评价` : ''}}</p>
                            </li>
                        </div>
                        <template #reference>
                            <i class="iconfont icon-shuoming" style="margin-left:4px;"></i>
                        </template>
                    </el-popover>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import LazyImage from '@/components/lazy-image/lazy-image.vue';
import Ellipsis from '@/components/ellipsis.vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { handleClassify } from '@/lib/tools';
import Star from '@/components/star/star.vue';
import config from '@/global/config';
import { handleAloneStageSubject, handleAloneGrade } from '@/lib/biz-tools.js'

const route = useRoute();


const emit = defineEmits(['obtain-course'])

const props = defineProps({
    detail: {
        type: Object,
        default: () => {
            return {};
        }
    },
    type: {
        type: String,
        default: 'index'
    },
    isPreview: { // 是否是预览状态
        type: Boolean,
        default: false
    }
})

const detailData = computed(() => {
    return props.detail;
})

// state 状态（0-暂存、1-提交（待提审）、2-待审核、3-审核驳回、4-审核通过）
// publishState 发布状态（0-未发布 1-已发布）只有发布了才能报名
const publishState = computed(() => {
    return detailData.value?.publishState == 1 && detailData.value?.state == 4;;
})

// 是否是创建者
const isCreater = computed(() => {
    return detailData.value?.isMyCreate;
})

// 是否是购买者
const isBuyPerson = computed(() => {
    return detailData.value?.isBuy;
})

// 申请课程
function apply () {
    emit('obtain-course', true);
}

// 继续学习
function study () {
    G_transmit('getLastStudyCatalogue', {
        queries: {
            moocId: route.params.moocId // 慕课Id
        }
    }).then(async (res) => {
        let lastCatalogueId = res?.data?.lastStudy?.catalogueId || res?.data?.firstStudy?.catalogueId || ''
        if (lastCatalogueId) {
            let pathNameMap = {
                'detail': 'catalogueDetail',
                'manageDetail': 'manageCatalogueDetail',
                'previewDetail': 'previewCatalogueDetail',
                'strainDetail': 'strainCatalogueDetail',
            }
            G_go({name: pathNameMap[route.name], params: {moocId: detailData.value.id }, query: { catalogueId: lastCatalogueId, courseId: detailData.value.courseList[0].id}})
        } else {
            G_dispatchEvent('toast', { message: '抱歉，当前课程还未关联课件', type: 'error'});
        }
    })
}

</script>

<style lang="scss" scoped>
.space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
}
.detail-header-wrapper {
    color: var(--srt-main-text-color);
    padding: 20px;
    border-radius: 4px;
    box-sizing: border-box;
    width: 1200px;
    display: flex;
    position: relative;
    text-align: left;
    background-color: #ffffff;

    .info-left {
        position: relative;
        width: 320px;
        height: 180px;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 16px;
        .logo-img {
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .info-right {
        flex: calc(100% - 336px) 0 0;
        width: calc(100% - 336px);
        .info-right-top {
            margin-top: 10px;
            margin-bottom: 2px;
        }
        .detail-btn {
            padding: 6px 10px !important;
            margin-left: 14px;
        }
        .detail-icon {
            font-size: 20px;
            color: var(--srt-color-gray);
            margin-left: 12px;
            cursor: pointer;
            &:hover {
                color: var(--main-active-text-color);
            }
        }

        .course-name {
            width: 594px;
            flex: 594px 0 0;
            font-size: 18px;
            text-align: left;
            font-weight: bold;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        }

        .user-cover {
            width: 22px;
            height: 22px;
            object-fit: cover;
            border-radius: 50%;
            margin-right: 4px;
        }

        .info-item {
            display: flex;
            margin-top: 8px;
            font-size: 14px;
            line-height: 22px;
            position: relative;
            // @include ellipsisOne();
            .item-label {
                color: var(--srt-color-gray);
            }
            &:last-child {
                margin-bottom: 0px;
            }
            .item-content {
                max-width: 600px;
            }
        }
        .info-item-label2 {
            font-size: 14px;
            line-height: 22px;
            // margin-top: 20px;
            color: var(--srt-color-gray);
            margin-right: 24px;
        }
        .info-item-num2 {
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #222222;
            line-height: 22px;
        }
        .option-item {
            margin-top: 16px;
            .study-rate {
                font-size: 14px;
                color: var(--srt-color-light-gray);
                line-height: 14px;
                margin-left: 12px;
                display: flex;
                align-items: center;
                .progress-warp{
                    display: inline-block;
                    width: 300px;
                    height: 10px;
                    background: #EFF0F2;
                    border-radius: 6px;
                    position: relative;
                    margin-left: 10px;
                    .inner{
                        position: absolute;
                        left:0;
                        top:0;
                        width:0;
                        height:100%;
                        background: #00B042;
                        border-radius: 6px;
                    }
                }
            }
            .studied-num {
                color: #00B042;
            }
        }
        .line {
            &::before {
                content: '';
                width: 1px;
                height: 14px;
                background: #CCCCCC;
                display: inline-block;
                margin: 0px 14px;
                transform: translateY(2px);
            }
        }
        .mar-r40 {
            margin-right: 40px;
        }
    }
    .mooc-detail-grade-wrap {
        padding-right: 27px;
        &::after {
            position: absolute;
            top: 4px;
            // left: 13px;
            right: 14px;
            content: '';
            display: inline-block;
            // top: 3px;
            width: 1px;
            height: 14px;
            background: #E0E2E4;
        }
    }
    .mooc-detail-grade {
        max-width: 150px;
        font-size: 14px;
        line-height: 22px; 
    }
    .mooc-detail-stage {
        font-size: 14px;
        line-height: 22px;
        max-width: 400px;
    }
    .mar-t8 {
        margin-top: 8px;
    }
    .rule-popover{
        padding: 16px;
    }
    .rule-info{
        .item{
            margin-bottom: 20px;
            .title{
                font-size: 16px;
                color: #000000;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                &::before{
                    content: '';
                    width:4px;
                    height:16px;
                    background-color: #0084F6;
                    margin-right: 6px;

                } 
            }
            .content{
                font-size: 14px;
                color: #000000;
                line-height: 22px;
                margin-left: 10px;
            }
        }
        .item:last-child{
            margin-bottom: 0;
        }
    }
}
</style>
